<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>学习组件名</h3>
        <city-qj></city-qj>
        <br>
        <my-com1></my-com1>
        

    </div>
    <script src="./vue.js"></script>
    <script>
        // 组件名的使用注意事项
        // 1. 定义组件名
            // new Vue ({
            //     components: {
            //         组件名1 : {},
            //         组件名2 : {}
            //     }
            // })
        // 如果是一个单词
        //     就小写
        // 如果是多个单词,如下二选一：
        //     1)小写用-分隔
        //     2)大驼峰命名法


        //
        // 2. 使用组件时的组件名
            //   <组件名1></组件名1>
        //   使用全小写的格式，如果有多个单词，用-分隔 （my-com1, my-good-com1）

        //   由于使用组件是在模板中使用，而h5不分dom名字大小写，
        //     所以，你写<MyCom1></MyCom1>,就是<mycom1></mycom1>
        

        const vm = new Vue({
            el: '#app',
            
            components: {
                "city-qj": {template: `<div>组件名：city-qj</div>`},
                // 大驼峰命名法: 多个单词全采用首字母大写
                MyCom1: {template: `<div>组件名：MyCom1</div>`},
                
            }
            

        })

    </script>
</body>
</html>